<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/d3.v4.min.js"></script>
	</head>
	<body>
	</body>
	<script>
	var height=600
	var width=600
	var svg=d3.select("body").append("svg")
			.attr("width",width)
			.attr("height",height);
			
	svg.append("rect")
	.attr("x",200)
	.attr("y",10)
	.attr("width",100)
	.attr("height",50)
	.attr("fill","steelblue")
	.attr("stroke","red");
	//创建圆角矩形
	svg.append("rect")
	.attr("x",350)
	.attr("y",10)
	.attr("rx",10)
	.attr("ry",10)
	.attr("width",100)
	.attr("height",50)
	.attr("fill","steelblue")
	.attr("stroke","blue");
	// /创建圆形
	svg.append("circle")
	.attr("cx",100)
	.attr("cy",120)
	.attr("r",50)
	.attr("fill","yellow")
	.attr("stroke","black");
	
	// /创建椭圆形
	svg.append("ellipse")
	.attr("cx",100)
	.attr("cy",240)
	.attr("rx",80)
	.attr("ry",50)
	.attr("fill","yellow")
	.attr("stroke","black");
	
	//绘制线段
	svg.append("line")
	.attr("x1",150)
	.attr("y1",150)
	.attr("x2",300)
	.attr("y2",300)
	.attr("stroke-width",6)
	.attr("stroke","black");
	
	//绘制多边形
	svg.append("polygon")
	.attr("points","50,10 10,45 30,80 70,80 90,45")
	.attr("fill","yellow")
	.attr("stroke","black");
	//绘制折线
	svg.append("polyline")
	.attr("points","50,10 10,45 30,80 70,80 90,45")
	.attr("fill","none")
	.attr("stroke","black")
	.attr("transform","translate(100,0)");
	
	
	svg.append("path")
	.attr("d","M30,100 L200,250 M30,100 H200 M30,100 V250")
	.attr("stroke","black")
	.attr("stroke-width",3);
	//添加文本
	svg.append("text")
	.attr("x",500)
	.attr("y",500)
	.text("Hello")
	.attr("font-size",30);
	
	
	</script>
</html>
